<template>
    <div class="App">
        <div class="center">
            <div class="header">
                同志交友网站
                <router-link to="/">首页</router-link>
                <router-link to="/about">关于</router-link>
            </div>
            <div class="body">
                <router-view></router-view>
            </div>
            <div class="footer">
                <li>关于我们</li>
                <li>关于我们</li>
                <li>关于我们</li>
                <li>关于我们</li>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name:"App"
    };
</script>

<style scoped>
    .center{
        width:1200px;
        margin:0 auto;
    }
    .header{
        text-align: center;
        font-size: 24px;
    }
    .body{
        text-align: center;
    }
    .footer{
        margin-top:20px;
        text-align: center;
    }
    .footer li{

        list-style: none;
        font-size: 12px;
        display: inline;
        margin: 0 10px;
    }

</style>